<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table class="easyui-datagrid" style="width:400px;height:auto;">
    <thead>
        <tr>
            <th field="name1" >col1</th>
            <th field="name2" >col2</th>
            <th field="name3" >col3</th>
            <th field="name4" >col4</th>
            <th field="name5" >col5</th>
            <th field="name6" >col6</th>
        </tr>
    </thead>
    <tbody>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
    </tbody>
    </table>

    <br/>

    <table class="easyui-datagrid" style="width:400px;height:auto;">
        <thead>
            <tr>
                <th field="name1" rowspan="2" >col1</th>
                <th field="name2" rowspan="2" >col2</th>
                <th field="name3" rowspan="2" >col3</th>
                <th field="name6" colspan="3" >Details</th>
            </tr>
            <tr>
                <th field="name4" >col4</th>
                <th field="name5" >col5</th>
                <th field="name6" >col6</th>
            </tr>
        </thead>
        <tbody>
           <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
                <td>data6</td>
           </tr>
           <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
                <td>data6</td>
           </tr>
        </tbody>
        </table>

        <br/>



        <!--
              toolbar:[{
            text:'Add',iconCls:'icon-add',handler:function(){
                alert('add');
            }
            },
            '-',   //这个'-'代表工具栏按钮的分隔竖线
            {
                text:'Cut',iconCls:'icon-cut',handler:function(){
                    alert('cut');
                }
            }]" 
        -->

        <!--绑定动态数据-->
        <!-- checkOnSelect:如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。默认值:true -->
        <!-- selectOnCheck:如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。默认值:true -->
        <table class="easyui-datagrid" data-options="url:'data.json',method:'get',checkOnSelect:false,selectOnCheck:false,
        toolbar:[{
            text:'Add',iconCls:'icon-add',handler:function(){
                alert('add');
            }
        },'-',{
            text:'Cut',iconCls:'icon-cut',handler:function(){
                alert('cut');
            }
        }]" 
        style="width:400px;height:auto;" >
            <thead>
                <tr>
                    <th field="ckb" checkbox="true"></th>  <!--这里指定数据中不存在的列名-->
                    <th field="id">ID</th>
                    <th field="name">分类</th>
                </tr>
            </thead>
        </table>

        <br/>

        <!--js初始化-->
        <button type="button" onclick="getSelectedRow()" value="" >获得选中行</button>
        <button type="button" onclick="$('#dg').datagrid('clearChecked')">清除选中行</button>
        <!--在没有复选框的时候也可以使用selectAll,unselectAll来选中所有行,取消选中所有行,行的背景色会发生改变-->
        <button type="button" onclick="$('#dg').datagrid('selectAll')">选中所有行</button>
        <button type="button" onclick="$('#dg').datagrid('unselectAll')">取消选中</button>
        <button type="button" onclick="$('#dg').datagrid('load',{order:'desc'})">加载</button>
        <!--reload:与load的区别就是reload表格分页的时候会保持(停留)在当前页,load会显示第一页的数据-->
        <button type="button" onclick="$('#dg').datagrid('reload',{order:'desc'})">重新加载</button>
        <br/>
        <table id="dg" style="width:400px;">
        </table>

        


        <br/>
         <!-- html标签的形式加工具栏 -->
        <table class="easyui-datagrid" data-options="url:'data.json',method:'get',toolbar:'#tb'" 
        style="width:400px;height:auto;" >
            <thead>
                <tr>
                    <th field="id">ID</th>
                    <th field="name">分类</th>
                </tr>
            </thead>
        </table>


        <div id="tb">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" >Add</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',plain:true" >Cut</a>
            
        </div>


        <br/>

        <!--表格绑定静态数据-->
        <table id="dg2" >

        </table>

        <br/>
        <!--html标签和js混合使用-->
        <table id="dg3" >
            <thead>
                <th field="f1">First</th>
                <th field="f2">Second</th>
            </thead>
        </table>

        <script>
            $(function(){
                $("#dg").datagrid({
                    url:'data.json',
                    method:'get',
                    loadMsg:"正在加载,请稍后...",  //修改加载中的文字信息
                    striped:true,  //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
                    rownumbers:true,  //行号
                    //singleSelect:true,//限制你每次只能选择1行,默认可以选择多行,选择行会变颜色
                    remoteSort:false,//执行不从服务器端排序,默认是从服务端排序
                    columns:[[                                                  
                        {"field":"ck",checkbox:true},
                        //order:'desc':指定默认的排序顺序,第一次点击排序方式
                        {"field":'id',"title":'ID',sortable:true,order:'desc'},//sortable:指定当前字段是否可以被排序,默认服务器排序,点击向服务器传参:http://127.0.0.1:8080/pages/datagrid/data.json?sort=id&order=desc
                        {"field":'name',"title":'分类',formatter:function(value,row,index){
                            return `${value}<span style='color:red' >[${row.id}]</span>`;
                        }},
                    ]],
                    toolbar:[{
                        text:'Add',iconCls:'icon-add',handler:function(){
                            alert('add');
                        }
                        },
                        '-',
                        {
                            text:'Cut',iconCls:'icon-cut',handler:function(){
                                alert('cut');
                            }
                        }]
                    });
            });


            function getSelectedRow(){

                    //singleSelect:false时,获取多行数据
                    //singleSelect:true时,如果获取单行数据只需要取数组的第一个元素即可
                    //获得复选框选中的所有行
                    // var checkedRow=$('#dg').datagrid('getChecked');

                    // console.log(checkedRow);

                    // for(var i=0;i<checkedRow.length;i++){
                    //     alert(checkedRow[i].name);
                    // }
                   
                    //singleSelect:true:获取单行数据
                    //var selected=$('#dg').datagrid('getSelected');
                    //alert(selected.name);

                    //singleSelect:false:
                    var selections=$('#dg').datagrid('getSelections');
                    console.log(selections);
                    for(var i=0;i<selections.length;i++){
                        alert(selections[i].name);
                    }

            }


            $('#dg2').datagrid({
                columns:[[
                    {field:'f1',title:'第一列'},
                    {field:'f2',title:'第二列'},
                ]],
                data:[
                    {f1:'value1',f2:'value2'},
                    {f1:'value21',f2:'value22'}
                ]
            });

            //只绑定了数据,并没有绑定列,js和html混合使用
            $('#dg3').datagrid({
                data:[
                    {f1:'value1',f2:'value2'},
                    {f1:'value21',f2:'value22'}
                ]
            });

        </script>

</body>
</html>